<!--
 * @Author: wpp 906008377@qq.com
 * @Date: 2025-03-26 14:32:40
 * @LastEditors: wpp 906008377@qq.com
 * @LastEditTime: 2025-04-03 11:58:48
 * @FilePath: \vue-project\src\views\TransformStream.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <Model
    v-model="testCount"
    v-model:maxNum.limitMax="maxTestCount"
    v-model:minNum="minTestCount"
  ></Model>

  <div class="marginTop">
    <ElButton @click="fetchStreamData">点击请求</ElButton>
  </div>

  <div class="marginTop">
    <Attr id="attr" data-header="header" data-main="main" data-footer="footer"></Attr>
  </div>

  <div class="marginTop">
    <SlotPage>
      <template #header>
        <div>headerContent</div>
      </template>
      <template #default="mainObj">
        <div>{{ mainObj.test }}</div>
      </template>
      <template #footer>
        <div>footerContent</div>
      </template>
    </SlotPage>
  </div>

  <div class="marginTop">
    <el-input v-model="testUseLogTxt" placeholder="请输入" style="width: 300px"></el-input>
  </div>

  tsx
  <div class="marginTop">
    <HPage test="asdfasdf" @testEmit="testEmitFn" data-atter="asd">
      <div>slotTest文本</div>
    </HPage>
  </div>

  自定义组件
  <div class="marginTop">
    <my-element test="123"></my-element>
  </div>

  <div class="marginTop height-box">
    <div class="height-container"></div>
  </div>

  <IntersectionObserver></IntersectionObserver>
</template>
<script setup>
import { onMounted, ref, defineCustomElement } from 'vue'

//customElements: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/customElements
import CustomElement from '@/views/component/customElement.vue'
if (!customElements.get('my-element')) {
  const myVueElement = defineCustomElement(CustomElement)
  customElements.define('my-element', myVueElement)
}

import Model from '@/views/component/Model.vue'
import Attr from '@/views/component/Attr.vue'
import SlotPage from '@/views/component/Slot.vue'
import IntersectionObserver from '@/views/component/IntersectionObserver.vue'
import HPage from '@/views/component/HPage'

const testCount = ref(10)
const maxTestCount = ref(15)
const minTestCount = ref(1)

import { useLog } from '@/utils/log'
const testUseLogTxt = ref('')
const testStatic = useLog('静态文本测试')
const testReactive = useLog(testUseLogTxt)
console.log(testStatic, testReactive)

// 处理流式响应数据
async function fetchStreamData() {
  const response = await fetch('http://localhost:8899/testDoc.doc')
  const reader = response.body.getReader()
  const decoder = new TextDecoder()

  try {
    const flag = true
    while (flag) {
      const { value, done } = await reader.read()

      if (done) break

      // 解码并处理数据
      const chunk = decoder.decode(value, { stream: true })
      console.log('收到数据块:', chunk)
    }
  } finally {
    reader.releaseLock()
  }
}

const testEmitFn = (txt) => {
  console.log('testEmitFn', txt)
}

onMounted(() => {})
</script>
<style lang="scss" scoped>
.marginTop {
  margin-top: 15px;
}

.height-box {
  padding: 15px;

  .height-container {
    height: 1000px;
    border: 1px solid red;
  }
}
</style>
